var sq = document.getElementById('sqBox');
var drag = document.getElementById('drag');
var moveX = 0;
var moveY = 0;
var speed = 4;
console.log(sq.clientWidth - drag.offsetWidth)
function move(){
	if(moveX < sq.clientWidth - drag.offsetWidth && moveY == 0){
		moveX = moveX + speed;
		if(moveX>=sq.clientWidth - drag.offsetWidth){
			moveX = sq.clientWidth - drag.offsetWidth;
		}
		drag.style.left = moveX +'px';
		// console.log("窗体宽度=",sq.clientWidth - drag.offsetWidth);
		// console.log("moveX=",moveX);
		// console.log("left=",drag.style.left);
	}else if(moveX >= sq.clientWidth - drag.offsetWidth && moveY < sq.clientHeight - drag.offsetHeight){
		moveY = moveY + speed;
		if(moveY>=sq.clientHeight - drag.offsetHeight){
			moveY = sq.clientHeight - drag.offsetHeight;
		}
		drag.style.top = moveY + 'px';
		// console.log("窗体高度=",sq.clientHeight - drag.offsetHeight);
		// console.log("moveY=",moveY);
		// console.log("top=",drag.style.top);
	}else if(moveX > 0 && moveY >= sq.clientHeight - drag.offsetHeight){
		moveX = moveX - speed;
		if(moveX<=0){
			moveX = 0;
		}
		drag.style.left = moveX +'px';
		// console.log("窗体宽度=",sq.clientWidth - drag.offsetWidth);
		// console.log("moveX=",moveX);
		// console.log("left=",drag.style.left);
	}else if(moveY >= 0 && moveX == 0){
		moveY = moveY - speed;
		if(moveY<=0){
			moveY = 0;
		}
		drag.style.top = moveY +'px';
		// console.log("窗体高度=",sq.clientHeight - drag.offsetHeight);
		// console.log("moveY=",moveY);
		// console.log("top=",drag.style.top);
	}
	
	window.requestAnimationFrame(move);
};
window.requestAnimationFrame(move);